<template>
  <div class="header">
    <i :class="isCollapse?'el-icon-s-operation':'el-icon-close'" @click="updateCollapse" style="margin-left: 10px"/>
    <el-menu mode="horizontal" menu-trigger="click" :unique-opened="true">
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-submenu index="2-2">
          <template slot="title">选项2</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <el-avatar slot="title" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
        <el-menu-item index="3-1" @click="dialogVisible = true">信息</el-menu-item>
        <el-menu-item index="3-2" @click="logout">退出</el-menu-item>
      </el-submenu>
    </el-menu>
    <el-dialog title="用户信息" :visible.sync="dialogVisible">
      <el-descriptions border>
        <el-descriptions-item label="用户名">{{ userName }}</el-descriptions-item>
        <el-descriptions-item v-for="(v, k, i) in details" :key="i" :label="k">{{ v }}</el-descriptions-item>
        <el-descriptions-item label="权限">
          <el-tag v-for="(v, i) in authorities" :key="i">{{ v.authority }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'

export default {
  name: "Header",
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    async logout() {
      await this.$store.dispatch("logout");
      this.$router.push("/login");
      this.$message({message: '退出成功！', type: 'success', duration: 1000});
    },
    ...mapMutations(['updateCollapse'])
  },
  mounted() {
    // 通过全局事件总线清除关键字
    // this.$bus.$on("clear", () => {
    //   this.keyword = "";
    // });
  },
  computed: {
    ...mapState(['user']),
    ...mapState({
      userName: (state) => {
        return state.user.userInfo.name;
      }
    }),
    authorities() {
      return this.user.userInfo.authorities;
    },
    details() {
      return this.$store.state.user.userInfo.details;
    },
    ...mapState(['home']),
    isCollapse() {
      return this.home.isCollapse;
    }
  }
};
</script>

<style scoped>
.header {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中，针对 login-container 下面的子元素，不包含'孙子'元素 */
  height: 100%;
}

i {
  font-size: 250%
}
</style>
